<template>
  <div class="customer-box">
      <p class="title-box">您的专属融资顾问</p>
      <div class="customer-div"  v-for="item in gwList" :key="item.id" >
          <div class="top-info">
              <div class="img-info"><img :src="item.avatar ? item.avatar : require('../../assets/image/avatar-default.png')" alt=""></div>
              <div class="title-info">
                  <div>{{item.userName}}</div>
                  <div>电话：{{item.phone}}</div>
              </div>
              <div class="service-info">
                  <!-- <img src="../../assets/image/editicon.png" alt="">
                    服务评价 -->
              </div>
          </div>
          <div class="bottom-info">
              <button class="button1">
                  <a :href="'tel:' + item.phone">电话联系</a>
              </button>
            <!-- <button class="button2">在线沟通</button> -->
          </div>
      </div>
        <p class="title-box">客服</p>
      <div class="customer-div" v-for="item in customerList" :key="item.id" >
          <div class="top-info">
              <div class="img-info"><img :src="item.avatar ? item.avatar : require('../../assets/image/avatar-default.png')" alt=""></div>
              <div class="title-info">
                  <div>{{item.userName}}</div>
                  <div>电话：{{item.phone}}</div>
              </div>
              <div class="service-info">
                  <!-- <img src="../../assets/image/editicon.png" alt="">
                    服务评价 -->
              </div>
          </div>
          <div class="bottom-info">
              <button class="button1">
                  <a :href="'tel:' + item.phone">电话联系</a>
              </button>
            <!-- <button class="button2">在线沟通</button> -->
          </div>
      </div>
  </div>
</template>

<script>
import { getKf } from "api/User"
export default {
    data(){
        return{
            customerList:[],
            gwList: []
        }
    },
    mounted() {
        getKf({roleCode: "platform_cust_ser" }).then(({ code, data, message }) => {
            if (!code) {
                this.customerList = data;
            } else {
                this.$toast(message);
            }
        })

        getKf({roleCode: "financial" }).then(({ code, data, message }) => {
            if (!code) {
                this.gwList = data;
            } else {
                this.$toast(message);
            }
        })
    }
}
</script>

<style lang="stylus" scoped>
@import './../../assets/styl/mixin.styl'
.customer-box
    height 100vh
    padding 0 rem(15)
    background #F7F7F7
    overflow-y scroll
    .title-box
        color #333333
        font-size rem(18)
        font-weight bold
        margin rem(30) 0 0 0
    .customer-div
        margin-top rem(15)
        display flex
        flex-direction column
        background #FFFFFF
        .top-info
            display flex
            justify-content flex-start
            align-items center
            border-bottom rem(0.5) solid #E0E0E0
            padding rem(20) rem(15)
            .img-info
                width rem(45)
                height rem(45)
                img 
                    width 100%
                    height 100%
            .title-info
                margin-left rem(12)
                font-size rem($ft15)
                color #999999
                :first-child
                    color #333333
                    margin-bottom rem(15)
            .service-info
                margin-left rem(25)
                font-size rem(13)
                color #2F54EB
        .bottom-info 
            display flex
            justify-content flex-end
            padding rem(15)
            button 
                width rem(95)
                height rem(23)
                font-size rem(13)
                border-radius rem(11.5)
            .button1
                color #2F54EB
                border rem(1) solid #2F54EB
                margin-right rem(10)
            .button2
                color #FF4D4F
                border rem(1) solid #FF4D4F
</style>